﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/global.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/getURLParam.js"></script>
		<style>
		.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body class="bodyback">
		<header class="mui-bar mui-bar-nav headerstyle" >
			<a class="mui-action-back astyle"><img src="../../images/drawable-hdpi/head_back.png"/></a>
			<span id="title">单车档案</span>
			<span class="focus" id="edit" onclick="goedit()">修改</span>
		</header>
		<div>
			<div >
				<img src="../../images/drawable-hdpi/singlecar_img.png" style="width: 100%;"/>
				<img class="mui-pull-left vclheadpic" id="vclhead" src="../../images/drawable-ldpi/record_default1.png" >
				<span class="vclbaseinfosapn" id="vcluser">
						<!--<a href="#" onclick="tel:8888"><img src="../../images/drawable-hdpi/tel_grey.png" style="width: 30px;height: 30px;position: relative;top: 10px;"/></a>-->
				</span>				
				<span class="vclbaseinfosapn" id="vclbaseinfo"></span>
				<hr/>
				<span class="vclbaseinfosapn" id="egntype"></span>
				<button type="button" class="mui-btn" id="focus" style="height: 25px;position: relative;right: 180px;font-size:11px;" onclick="getfocus()"></button>
				<button type="button" class="mui-btn" id="ecm" style="height: 25px;position: relative;left: 130px;bottom: 25px;font-size:11px;background-color: #01AEE3;color: #FFFFFF;" onclick="">ECM</button>
				<div style="background-color: #51000;color:#51000;text-align: center;font-size: 14px;">
					<table style="width: 100%;height: 140px;">
						<tr>
							<td colspan="3" style="background-image: url(../../images/drawable-ldpi/car_bg.png);background-size: cover;">
								<span style="position: relative;padding-top: 60px;right: 60px;">近七天里程</span>
								<span style="position: relative;padding-top: 90px;right: 0px;">平均油耗</span>
								<span style="position: relative;padding-top: 60px;left: 60px;">近七天油耗</span>
								<br />
								<span style="position: relative;padding-top: 60px;right: 60px;" id="7runkm"></span>
								<span style="position: relative;padding-top: 90px;left: 0px;" id="7peroil"></span>
								<span style="position: relative;padding-top: 60px;left: 60px;" id="7oil"></span>
								<!--<img src="../../images/drawable-ldpi/car_bg.png" style="width: 65%;" />-->
							</td>
						</tr>
					</table>
					<table style="width: 100%;">
						<tr style="background-color: white;">
							<td><a href="#" onclick="" ><img src="../../images/drawable-hdpi/position_gray.png" style="width: 50%;"/></a></td>
							<td><a href="#" onclick=""><img src="../../images/drawable-hdpi/worklog_selected.png" style="width: 50%;"/></a></td>
							<td><a  href="#" onclick=""><img src="../../images/drawable-ldpi/failure_gray.png" style="width: 50%;"/></img?></a></td>
							<td><a  href="#" onclick=""><img src="../../images/drawable-ldpi/track_gray.png" style="width: 50%;"/></img?></a></td>
						</tr>
						<tr style="background-color: white;">
							<td>最新位置</td>
							<td>工作日志</td>
							<td>现行故障</td>
							<td>行驶轨迹</td>
						</tr>
					</table>
				</div>
				<div style="position: relative;margin-top:0px;"><span >单车日记</span></div>
				<div class="chart" id="barChart" style="padding-bottom: 5px;"></div>	
			</div>
			
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/echarts-all.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var sessionid=GetQueryString("sessionid");
			var accountid=GetQueryString("accountid");
	        var proversion=GetQueryString("proversion");
	        var vclid=GetQueryString("vclid");
	       // var keyontype=GetQueryString("keyontype");
	        var isatn="";//机构名称
	        var hourvalue = document.getElementById("hourvalue");//累计工作小时
	        var oilvalue = document.getElementById("hourvalue");//累计油耗
	        //var keyontype = document.getElementById("keyontype");
	        var vclbaseinfo = document.getElementById("vclbaseinfo");
	        var focus = document.getElementById("focus");
	        var vcluser = document.getElementById("vcluser");
	        var egntype = document.getElementById("egntype");
	        var runkm = document.getElementById("7runkm");
	        var peroil = document.getElementById("7peroil");
	        var oil = document.getElementById("7oil");
	        var iolarr=new Array();
	        var workhourarr=new Array();
	        var perworkharr=new Array();
	        var workdatearr=new Array();
	        //ajax请求获取单车档案信息
			mui.ajax('../../../APP/vclfiles', {
				data: {
					param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '"}}'
				},
				dataType: 'jsonp', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					var jsonObj = window.JSON.parse(data);
					if (jsonObj.resultCode == "1") {
						//获取返回数据的data
						var resultdata = jsonObj.data;
						if (null != resultdata) {
							if(resultdata.carowner!=null && resultdata.carowner!=""){
								var tel = resultdata.carowner+'<a href="#" onclick="goedit()"><img src="../../images/drawable-hdpi/tel_blue.png" style="width: 30px;height: 30px;position: relative;top: 10px;"/></a>'
								vcluser.innerHTML=tel;
							}else{
								var tel = '车辆联系人<a href="#" onclick="goedit()"><img src="../../images/drawable-hdpi/tel_grey.png" style="width: 30px;height: 30px;position: relative;top: 10px;"/></a>'
								vcluser.innerHTML=tel;
								vcluser.style.color="#999999"
							}
							var basein="";
							if(resultdata.facname!=null && resultdata.facname!=""){
								basein+=resultdata.facname;
							}else{
								basein+="--";
							}
							if(resultdata.drivetype!=null && resultdata.drivetype!=""){
								basein+="&nbsp;&nbsp;&nbsp;"+resultdata.drivetype;
							}else{
								basein+="&nbsp;&nbsp;&nbsp;--";
							}
							vclbaseinfo.innerHTML=basein;
							var egn ="";
							if(resultdata.esntype!=null && resultdata.esntype!=""){
								egn+=resultdata.esntype;
							}else{
								egn+="--";
							}
							if(resultdata.esnnum!=null && resultdata.esnnum!=""){
								egn+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+resultdata.esnnum;
							}else{
								egn+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--";
							}
							egntype.innerHTML=egn;
							isatn=resultdata.isatn;
							if(resultdata.isatn=="1"){
					        	focus.innerHTML="取消关注";
					        }else{
					        	focus.innerHTML="添加关注";
					        }
					        runkm.innerHTML=resultdata.tolkm+"km";
					        oil.innerHTML=resultdata.toloil+"L";
					        peroil.innerHTML=resultdata.tolperkmoil+"L/100km";
					        
						} else {
						}
			
					} else {
						//curtflt.innerHTML = "请求出错!" + jsonObj.resultCode;
					}
				},
				error: function(xhr, type, errorThrown) {
				}
			});
			mui.ajax('../../../APP/Chart', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclid":"' + vclid + '"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						if (jsonObj.resultcode == "1") {
							//获取返回数据的data
							var resultdata = jsonObj.data
							jsondata = jsonObj.data;
							if (resultdata.length > 0) {
								//获取每台设备的数据
								//var table = document.getElementById("table");
								var lengt = resultdata.length;
								var j=0;
								var n=0;
								if((lengt-7)>=0){
									j=lengt-7;
									for (var i=lengt-1; i >= (lengt-7); i--) {
										workdatearr[n]=jsondata[j].workdate;
										if(jsondata[j].runoil!=null && jsondata[j].runoil!="--" && jsondata[j].runoil!=""){
											iolarr[n]=jsondata[j].runoil;
										}else{
											iolarr[n]="0";
										}
										if(jsondata[j].runkm!=null && jsondata[j].runkm!="--" && jsondata[j].runkm!=""){
											workhourarr[n]=jsondata[j].runkm;
										}else{
											workhourarr[n]="0";
										}
										if(jsondata[j].perkmoil!=null && jsondata[j].perkmoil!="--" && jsondata[j].perkmoil!=""){
											perworkharr[n]=jsondata[j].perkmoil;
										}else{
											perworkharr[n]="0";
										}
										n++;
										j++;
									}
								}else{
									
								}
							getechars();
						} else {
							document.getElementById("test").innerHTML=jsonObj.resultcode;
						}
					} else {
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					//f.innerHTML = "error";
				}
			});
			//处理点击事件，需要打开原生浏览器
			mui('body').on('tap', 'a', function(e) {
				var href = this.getAttribute('href');
				if (href) {
					if (window.plus) {
						plus.runtime.openURL(href);
					} else {
						location.href = href;
					}
				}
			});
			function getpstn(){
			}
			//添加/取消关注
			function getfocus(){
				var atnType="";
				if(isatn=="1"){//点击按钮为取消关注
					atnType="0";
				}else{//点击按钮为添加关注
					atnType="1";
				}
				//ajax请求关注接口
				mui.ajax('../../../APP/atnFtn', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '","type":"'+atnType+'"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						if (jsonObj.resultCode == "1") {
							//获取返回数据的data
							if(atnType=="0"){
								focus.innerHTML="添加关注";
								isatn="0";
							}else{
								focus.innerHTML="取消关注";
								isatn="1";
							}
						} else {
							//focus.innerHTML=jsonObj.resultCode;	
						}
					},
					error: function(xhr, type, errorThrown) {
						}
					});
				
			}
			function getecm(){
				
			}
			function setMain(vclID){//新oc与h5交互
				window.webkit.messageHandlers.testfun11.postMessage(vclID);
				//window.location.href='../s';
			}
			function dial() {
				plus.device.dial(userphone, false);
			}
			function goedit(){
				
				mui.toast("edit");
				mui.openWindow("vclbaseinfo.html?&vclid="+vclid+"&sessionid="+sessionid+"&accountid="+accountid,"vclbaseinfo.html")
			}
			function getechars(){
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
				} : {
					legend: {
						data: ['油耗','里程', '百公里油耗']
					},
					grid: {
						x: 50,
						x2: 60,
						y: 50,
						y2: 25
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: false
							},
							magicType: {
								show: false,
								type: ['line', 'bar']
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						//data: ['3-15', '3-16', '3-17', '3-18', '3-19', '3-20', '3-21']
						data: [workdatearr[0],workdatearr[1],workdatearr[2],workdatearr[3],workdatearr[4],workdatearr[5],workdatearr[6]]
					}],
					yAxis: [{
						type: 'value',
						name: '油耗',
						min: 0,
						max: 250,
						interval: 50,
						axisLabel: {
							formatter: '{value}'
						}
					}, {
						type: 'value',
						name: '百公里油耗',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [
						{
							name: '油耗',
							type: 'bar',
							//data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
							data: [iolarr[0],iolarr[1],iolarr[2],iolarr[3],iolarr[4],iolarr[5],iolarr[6]]
						},
						{
							name: '里程',
							type: 'bar',
							//data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
							data: [workhourarr[0],workhourarr[1],workhourarr[2],workhourarr[3],workhourarr[4],workhourarr[5],workhourarr[6]]
						},
						{
							name: '百公里油耗',
							type: 'line',
							yAxisIndex: 1,
							//data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
							data: [perworkharr[0],perworkharr[1],perworkharr[2],perworkharr[3],perworkharr[4],perworkharr[5],perworkharr[6]]
						}
					]
				};
				return chartOption;
			};
				var byId = function(id) {
				return document.getElementById(id);
			};
				var barChart = echarts.init(byId('barChart'));
			
				barChart.setOption(getOption('bar'));
				//document.getElementById("dd").innerHTML=da;
			}
		</script>
	</body>

</html>